import React from 'react';
import { View, Text, TouchableOpacity, Image, Alert } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { SwipeAction } from 'antd-mobile';
import { age } from '../../../../utils';
import styles from './styles';

const alert = Alert.alert;

export default ({
  name,
  customerFamilyMemberId,
  genderType,
  relationTypeName,
  relationType,
  idCardNo,
  mobile,
  birthday,
  onItemPress,
  hasSocialSecurity,
  customerId,
  customerName,
  store,
}) => {
  const avatarColor = genderType => {
    switch (genderType) {
      case 1: {
        return '#1aa3ff';
      }
      case 2: {
        return '#ffb3ec';
      }
      default: {
        return '#999';
      }
    }
  };
  const isCompleted = () => {
    if (!idCardNo || !mobile) {
      return <Text style={styles.notCompleled}>信息有待完善</Text>;
    }
    return <Text style={styles.isCompleled}>信息完整</Text>;
  };

  const right = [
    {
      text: '编辑',
      onPress: () =>
        Actions.editFamilyMember({
          customerId,
          memberId: customerFamilyMemberId,
          customerName,
          member: { name, relationTypeName, relationType },
        }),
      style: { backgroundColor: '#3399ff', color: '#fff' }
    }
  ];
  const removeMember = (customerId, customerFamilyMemberId) => {
    alert('删除家庭成员', `您确定要删除家庭成员${name}吗 ?`, [
      {
        text: '取消',
      },
      {
        text: '删除',
        onPress: store.remove.bind(store, customerId, customerFamilyMemberId),
        style: { color: '#f00' }
      }
    ]);
  };
  const left = [
    {
      text: '删除',
      onPress: () => removeMember(customerId, customerFamilyMemberId),
      style: { backgroundColor: '#f00', color: '#fff' }
    }
  ];
  const content = (
    <TouchableOpacity onPress={onItemPress} style={styles.itemWrap}>
      <Icon name="face" size={32} color={avatarColor(genderType)} />
      <View style={styles.memberInfo}>
        <View style={styles.nameAndAge}>
          <Text style={styles.name}>{name}</Text>
          <Text style={styles.age}>({age(birthday)})</Text>
        </View>
        <Text style={styles.relationShip}>{relationTypeName}</Text>
      </View>
      <View style={styles.status}>
        <Text>{isCompleted()}</Text>
      </View>
    </TouchableOpacity>
  );
  if (relationType !== 1) {
    return (
      <SwipeAction right={right} left={left} autoClose>
        {content}
      </SwipeAction>
    )
  }
  return content;
};
